<template>
  <div class="map-container" :style="{height: height+'px'}">
    <div v-if="isEdit" style="font-size:20px;">经度：{{ lng }}，纬度：{{ lat }}</div>
    <div id="map" ref="container" class="amap"></div>
    <div v-if="isEdit" class="tipWrapper">
      <el-input id="keyword" v-model="keyword" placeholder="输入地点" style="width:200px;" />
    </div>
    <div v-if="isEdit" style="float:right;">
      <el-button size="small" @click="close()">取 消</el-button>
      <el-button size="small" type="primary" @click="updateLngLat()">确 定</el-button>
    </div>

  </div>

</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { amapKey } from '@/settings'

export default {
  name: "AMap",
  props: {
    initLng: "",
    initLat: "",
    height: "",
    dialogVisible: Boolean,
    isEdit: {
      type: Boolean,
      default: true
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  watch:{
    initLng(e){
      // console.log(e)
      this.initMap(this.MapClass)
    },
  },
  data() {
    return {
      MapClass: null,
      map: null,
      keyword: '',
      lng: '',
      lat: '',
      marker: null

    }
  },
  beforeCreate() {
    AMapLoader.load({
      "key": amapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
      "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      "plugins": ['AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      "AMapUI": { // 是否加载 AMapUI，缺省不加载
        version: '1.1',
        "plugins": []// 需要加载的 AMapUI ui插件
      },

    }).then(AMap => {
      this.MapClass = AMap
      this.initMap(AMap);
      this.mapSearch(AMap);
    }).catch(e => {
      console.error(e);
    })
  },
  methods: {
    initMap(AMap) {
      // this.map = new AMap.Map("container");
      // 或者使用 $refs 获取节点
      const self = this;
      const $map = this.$refs.container;

      this.map = new AMap.Map(
        $map, {
          center: [this.initLng ? this.initLng : 121.130414, this.initLat ? this.initLat : 31.458027],
          zoom: 14
        });
      if (this.initLat) {
        this.lng = this.initLng;
        this.lat = this.initLat;

        self.marker = new AMap.Marker({
          position: [this.initLng, this.initLat],
        });
        self.marker.setMap(self.map)
      }
      if (this.isEdit) {
        this.map.on('click', function(e) {
          self.lng = e.lnglat.getLng();
          self.lat = e.lnglat.getLat();
          if (self.marker) {
            self.marker.setMap(null);
            self.marker = null;
          }
          self.marker = new AMap.Marker({
            position: [self.lng, self.lat],
          });
          self.marker.setMap(self.map);
        });
      }
    },
    mapSearch(AMap) {
      // //输入提示
      var autoOptions = {
        input: "keyword",
        city: "太仓"
      };

      var auto = new AMap.AutoComplete(autoOptions);
      var placeSearch = new AMap.PlaceSearch({
        city: '太仓',
        map: this.map
      }); // 构造地点查询类
      auto.on("select", select);// 注册监听，当选中某条记录时会触发
      function select(e) {
        // placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name); // 关键字查询查询
      }

      // AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
      //   var autoOptions = {
      //     city: "北京", //城市，默认全国
      //     input: "keyword"//使用联想输入的input的id
      //   };
      //   var autocomplete= new AMap.Autocomplete(autoOptions);
      //
      // });
    },
    close() {
      this.$emit('update:dialogVisible', false);
    },
    updateLngLat() {
      const self = this;
      this.$emit('updateLngLat', self.lng, self.lat);
      this.$emit('update:dialogVisible', false);
    }

  }
}

</script>

<style scoped>
.map-container{
  width:100%;
  height:450px;
  position:relative;
}
.tipWrapper{
  position:absolute;
  top:40px;
  right:10px;
}
.amap{
  width:100%;
  height:calc(100% - 70px);
  margin-bottom:10px;
}

</style>
